<!--
 * @Author: wanlixin
 * @Date: 2019-10-04 19:41:52
 * @LastEditors: sylvanas
 * @LastEditTime: 2019-10-28 19:31:47
 * @Description: 
 -->
<template>
  <grimm-page type="button-view" title="Input">
    <template slot="content">
      <grimm-card title="内容输入" class="card-wrap">
        <div slot="cardContent">
          <grimm-list>
            <grimm-item label="基础用法">
              <grimm-input v-model="name" placeholder="请输入姓名..." icon="empty" :onEmpty="emptyFunc"/>
            </grimm-item>

            <grimm-item label="类型限制">
              <grimm-input
                v-model="phone"
                :onChangeBefore="onChangeBefore"
                placeholder="请输入手机号..."
              />
            </grimm-item>

            <grimm-item label="readonly">
              <grimm-input
                readonly
                v-model="address"
                :onChangeBefore="onChangeBefore"
                placeholder="readonly"
              />
            </grimm-item>

            <grimm-item label="disabled">
              <grimm-input
                disabled
                v-model="personId"
                :onChangeBefore="onChangeBefore"
                placeholder="禁止修改"
              />
            </grimm-item>

            <grimm-item label="文本域">
              <grimm-textarea v-model="desc" placeholder="请输入个人简介..." />
            </grimm-item>
          </grimm-list>
        </div>
      </grimm-card>

      <grimm-card disabled title="内容预览">
        <div slot="cardContent">
          <grimm-list>
            <grimm-item label="姓名：" class="grimm-item">{{name}}</grimm-item>
            <grimm-item label="手机：" class="grimm-item">{{phone}}</grimm-item>
            <grimm-item label="地址：" class="grimm-item">{{address}}</grimm-item>
            <grimm-item label="身份证：" class="grimm-item">{{personId}}</grimm-item>
            <grimm-item label="个人简介：" class="grimm-item">{{desc}}</grimm-item>
          </grimm-list>
        </div>
      </grimm-card>
    </template>
  </grimm-page>
</template>

<script>
import GrimmPage from 'example/components/GrimmPage.vue';
export default {
  data() {
    return {
      name: '',
      phone: '',
      address: 'ShangHai',
      personId: '310xxx',
      desc: '',
      optionValue: {
        label: 'Option Checkbox',
        value: '1',
      },
    };
  },
  methods: {
    onChangeBefore(vals) {
      return /^\d{0,}$/.test(vals);
    },
    emptyFunc() {
      console.log('empty')
    }
  },
  components: {
    GrimmPage,
  },
};
</script>
<style lang="stylus"  scoped>
.card-wrap {
  margin-bottom: 16px;
}

.grimm-item >>> span {
  text-align: left;
  word-break: break-all;
}
</style>